<template>
  <view>
    <view v-if="orderMaterialInfoList.length > 0">
      <view class="card-view top-card" :key="index" v-for="(item, index) in orderMaterialInfoList">
        <view class="info-row">
          <view class="name">耗材名称</view>
          <view class="value">{{ item.materialName }}</view>
        </view>
        <view class="info-row">
          <view class="name">消耗数量</view>
          <view class="value">{{ item.materialNum }}</view>
        </view>
        <view class="info-row">
          <view class="name">金额</view>
          <view class="value">{{ item.inputPrice * item.materialNum }}元</view>
        </view>
      </view>
    </view>
    <view class="card-view top-card" v-else>
      <view style="display: flex;justify-content: center;">
        暂无
      </view>
    </view>
    <!-- <view class="card-view last-card">
      <template>
        <view class="evaluate-row">
          <view class="name">耗材名称</view>
          <view class="value">
            <picker range-key="materialName" :range="materialInfoUseList" @change="onPickerChange">
              <view class="picker-item">
                <view v-if="!form.materialName">请选择</view>
                <view v-else style="color: #232323">{{
                  form.materialName
                }}</view>
                <uni-icons type="right"></uni-icons>
              </view>
            </picker>
          </view>
        </view>
        <view class="evaluate-row">
          <view class="name">消耗数量</view>
          <view class="value">
            <input v-model="form.materialNum" placeholder="请填写数量" type="number" placeholder-class="placeholder-class" />
          </view>
        </view>
      </template>
</view> -->
    <!-- <view class="add-del-view">
      <view class="del-btn" @click="delOne">删除一个</view>
      <view class="gap"></view>
      <view class="add-btn" @click="addOne">添加一个</view>
    </view> -->
    <view style="height: 1rpx"></view>

    <view class="bottom-view">
      <view class="money">金额：{{ totalMoney }}元</view>
      <view class="submit-btn" v-if="consumableStatus !== '支付成功'" @click="submit">支付</view>
    </view>
  </view>
</template>

<script>
import { queryOrderInfoDetail, queryById, createOrder } from '../../common/api/orderInfo.js'
export default {
  data() {
    return {
      uid: '',
      detailData: {},
      serviceItem: '',
      materialInfoUseList: [],
      orderMaterialInfoList: [],
      form: {
        uid: '',
        orderUid: '',
        orderNum: '',
        materialUid: '',
        materialName: '',
        materialPic: '',
        inputPrice: '',
        materialNum: '',
        unitName: '',
        specs: '',
        paymentStatus: '',

      },
      consumableStatus: ''

    }
  },
  computed: {
    totalMoney() {
      let sum = 0
      const list = this.orderMaterialInfoList || []
      list.forEach(e => {
        sum += e.inputPrice * e.materialNum
      })
      return sum
    }
  },
  onLoad(opt) {
    if (opt.uid) {
      this.uid = opt.uid
    }
  },
  onShow() {
    this.getOrderInfo()
    this.getOrderInfoDetail()
  },
  methods: {
    // 耗材详情
    getOrderInfoDetail() {
      queryOrderInfoDetail({
        orderUid: this.uid
      }).then(result => {
        this.orderMaterialInfoList = result.data.data.rows || []
        this.consumableStatus = this.orderMaterialInfoList[0].paymentStatus
        this.goodsNames = this.orderMaterialInfoList.map(item => item.materialName).join(',');

      })
    },
    // 订单基础信息
    getOrderInfo() {
      queryById({
        uid: this.uid
      }).then(result => {
        this.detailData = result.data.data
      })
    },
    submit() {
      this.payHandle()
    },

    // 预支付
    payHandle() {
      createOrder({ openId: this.detailData.wxOpenid, totalPrice: Number.parseFloat(this.totalMoney) * 100, orderType: '耗材上门', goodsName: this.goodsNames, orderNum: this.detailData.orderNum, }).then(result => {
        console.log('result', result);
        let orderInfo = {
          ...result.data.data,
          signType: 'HMAC-SHA256',
          appid: 'wx6abe127f5b5330b0',
          package: result.data.data.prepayId,
          timeStamp: result.data.data.timeStamp + '',
        }
        uni.requestPayment({
          provider: "wxpay",
          ...orderInfo,
          success(res) {
            console.log('支付成功', res);
            uni.showToast({
              icon: 'success',
              title: '支付成功',
              complete() {
                setTimeout(() => {
                  uni.navigateBack()
                }, 2000)
              }
            })
          },
          fail(err) {
            console.log('支付失败', err);
            uni.showToast({
              icon: 'none',
              title: '支付失败',
              complete() {

              }
            })
          }
        })
      }).catch(error => {
        console.log(error);
      })

    },


  }
}
</script>

<style lang="scss" scoped>
.card-view {
  background: white;
  padding: 0rpx 30rpx;
  box-sizing: border-box;
}

.top-card {
  margin-bottom: 10rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
  }
}

.more-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80rpx;
  color: rgba(35, 35, 35, 0.4);
  font-size: 26rpx;
}

.last-card {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.evaluate-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
  }

  .picker-item {
    color: rgba(136, 136, 136, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
  }

  input {
    text-align: right;
  }
}

.placeholder-class {
  color: rgba(136, 136, 136, 0.8);
  font-size: 28rpx;
}

.bottom-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  display: flex;
  padding: 14rpx 30rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 80rpx;

  .money {
    margin-bottom: 20rpx;
    font-size: 35rpx;
    font-weight: bold;
  }

  .line-btn {
    width: 250rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
  }

  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.checkbox-view {
  display: flex;
  flex-direction: column;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .top {
    display: flex;
    align-items: center;

    .name {
      width: 150rpx;
      font-size: #232323;
      font-weight: 28rpx;
      font-weight: bold;
    }

    .value {
      color: rgba(35, 35, 35, 0.8);
      font-size: 28rpx;
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
    }
  }

  .checkbox-group-view {
    margin-top: 20rpx;
  }
}

.add-del-view {
  display: flex;
  align-items: center;
  padding: 30rpx;
  box-sizing: border-box;
  margin-bottom: 180rpx;

  .del-btn {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d9001b;
    color: white;
    border-radius: 20rpx;
  }

  .gap {
    width: 30rpx;
  }

  .add-btn {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #169bd5;
    color: white;
    border-radius: 20rpx;
  }
}
</style>